<template>
  <div class="login-container">
    <el-form
      class="login-page"
      :rules="loginRules"
      ref="loginForm"
      :model="loginForm"
    >
      <el-form-item prop="username">
        <el-input
          type="text"
          placeholder="请输入用户名"
          v-model="loginForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          :type="passwordType"
          placeholder="请输入密码"
          v-model="loginForm.password"
        >
          <i
            class="el-icon-view el-input__icon"
            slot="suffix"
            @click="showPassword"
          >
          </i>
        </el-input>
      </el-form-item>
      <el-form-item :inline="true">
        <el-button
          :loading="loading"
          class="loginUser"
          type="primary"
          @click="login"
        >
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Login",
  components: {},
  data() {
    return {
      loading: false,
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
        ],
      },
      passwordType: "password",
    };
  },
  methods: {
    ...mapMutations({
      setUserInfo: "permission/SET_USERINFO",
      saveToken: "permission/SAVE_TOKEN",
      getUserPermission: "permission/GET_USER_PERMISSION",
    }),
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    // 登录
    login() {
      this.loading = true;
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          let params = {
            userName: this.loginForm.username.trim(),
            password: this.loginForm.password,
          };
          this.$axios
            .post(this.$api.setting.authApi.getLogin, params)
            .then((res) => {
              const { data } = res.data;
              this.loading = false;
              this.saveToken(data.token);
              this.setUserInfo(data.loginUser);
              this.$axios
                .get(this.$api.setting.userApi.getPermission, params)
                .then((res) => {
                  this.getUserPermission();
                  this.$router.push("/dataConnection/dataSourceManage");
                });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style>
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginUser {
  width: 100%;
}
</style>
